<h2>Slider</h2>
<p>
	<label for="amount">Display items:</label>
  	<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold" value='none' />
</p>
<div id='slider'></div>
<div id='result'></div>
<script type="text/javascript" src='js/jquery-ui.js'></script>
<script type="text/javascript">
	$('#slider').slider({
		range: true,
		min: 1,
		max: 10,
		values: [1, 1],
		slide: function(event, ui){
			$('#amount').val(ui.values[0] + ' - ' + ui.values[1]);
		},
		change: function(event, ui){
			var start = ui.values[0];
			var end = ui.values[1];

			$('#result').html('');
			for (var i = start; i <= end; i++) {
				var $item = $('<h3></h3>');

				$item.load('ajax/items.html #item-' + i).appendTo($('#result'));
			}
		}
	});
</script>